<template>
    <scroll-view
        class="wanlshop-find-container"
        :style="{
            paddingTop: `${headHeight}px`,
            height: `${windowHeight}px`,
            backgroundColor: ``,
        }"
        scroll-y
        enable-back-to-top
        enable-flex="true"
        @scrolltoupper="handleUpper"
        @scrolltolower="handleLower"
    >
        <block v-if="!user.isLogin && !userNo">
            <view class="bg-white margin-bj radius-bock flex align-center justify-center padding-lr padding-tb-xl">
                <view class="text-center">
                    <text class="wanl-gray">登录后才能看到您关注店铺的动态哦</text>
                    <view class="margin-top-sm">
                        <button class="cu-btn bg-orange" @tap="$wanlshop.auth('/pages/find')">马上登陆</button>
                    </view>
                </view>
            </view>
        </block>
        <block v-else>
            <view
                class="wanlshop-find-container__list wanl-find margin-top-sm"
                v-for="(find, index) in dataList"
                :key="find.id"
            >
                <view class="margin-lr-bj bg-white radius-bock padding-lr-bj padding-top-bj padding-bottom-bj">
                    <!-- 头部 -->
                    <view class="userinfo">
                        <block v-if="find.shop">
                            <view class="avatar" @tap="handleUser(find.user_no)">
                                <view
                                    class="cu-avatar round margin-right-bj"
                                    :style="{
                                        backgroundImage:
                                            'url(' + $wanlshop.oss(find.shop.avatar, 35, 35, 2, 'avatar') + ')',
                                    }"
                                ></view>
                                <view class="content">
                                    <view class="info">
                                        <view v-if="find.shop.isself == 1">
                                            <view class="cu-tag sm wanl-bg-redorange radius margin-right-xs">自营</view>
                                            {{ find.shop.shopname }}
                                        </view>
                                        <view class="text-cut-2 margin-bottom-xs" v-else>
                                            <view
                                                class="cu-tag sm bg-gray radius margin-right-xs"
                                                v-if="find.shop.state == 0"
                                                >个人</view
                                            >
                                            <view
                                                class="cu-tag sm wanl-bg-blue radius margin-right-xs"
                                                v-if="find.shop.state == 1"
                                                >企业</view
                                            >
                                            <view
                                                class="cu-tag sm wanl-bg-orange radius margin-right-xs"
                                                v-if="find.shop.state == 2"
                                                >旗舰</view
                                            >
                                            {{ find.shop.shopname }}
                                        </view>
                                        <view class="wanl-gray-light text-sm text-cut">
                                            <text>{{ find.shop.city }}</text>
                                        </view>
                                    </view>
                                    <!-- <view class="wanl-find-head text-cut">
                                        <text class="wanl-black margin-right-bj shopname">
                                            {{ find.shop.shopname }}
                                        </text>
                                        <view
											v-if="find.isLive"
											@tap="onLive(find.isLive.id)"
											class="cu-tag sm wanl-bg-orange round"
										>
											<text class="wlIcon-zhibo"></text>
											直播中
										</view>
                                    </view> -->
                                    <view class="wanl-gray text-min">
                                        {{ $wanlshop.timeToDate(find.createtime) }}
                                    </view>
                                </view>
                            </view>
                            <view class="menu">
                                <button class="cu-btn radius-bock text-sm" @click.stop="handleFollow(index, find.shop)">
                                    <view v-if="find.isFollow === 0">
                                        <text class="wlIcon-31xuanze margin-right-xs text-bold"></text>
                                        关注
                                    </view>
                                    <view v-else>
                                        <text class="wlIcon-31guanbi margin-right-xs text-bold"></text>
                                        取关
                                    </view>
                                </button>
                                <button class="cu-btn wlIcon margin-left-sm" @click.stop="onShop(find.shop.id)">
                                    <text class="wlIcon-31dianpu"></text>
                                </button>
                            </view>
                        </block>
                        <block v-else>
                            <view class="avatar" @tap="handleUser(find.user_no)">
                                <view
                                    class="cu-avatar round margin-right-bj"
                                    :style="{
                                        backgroundImage:
                                            'url(' + $wanlshop.oss(find.user.avatar, 35, 35, 2, 'avatar') + ')',
                                    }"
                                ></view>
                                <view class="content">
                                    <view class="wanl-find-head text-cut">
                                        <text class="wanl-black margin-right-bj shopname">
                                            {{ find.user.nickname }}
                                        </text>
                                        <!-- <view
											v-if="find.isLive"
											@tap="onLive(find.isLive.id)"
											class="cu-tag sm wanl-bg-orange round"
										>
											<text class="wlIcon-zhibo"></text>
											直播中
										</view> -->
                                    </view>
                                    <view class="wanl-gray text-min">
                                        {{ $wanlshop.timeToDate(find.createtime) }}
                                    </view>
                                </view>
                            </view>
                            <view class="menu">
                                <button class="cu-btn radius-bock text-sm" @click.stop="handleFollow(index)">
                                    <view v-if="find.isFollow === 0">
                                        <text class="wlIcon-31xuanze margin-right-xs text-bold"></text>
                                        关注
                                    </view>
                                    <view v-else>
                                        <text class="wlIcon-31guanbi margin-right-xs text-bold"></text>
                                        取关
                                    </view>
                                </button>
                            </view>
                        </block>
                    </view>
                    <!-- 内容 -->
                    <!-- <view class="content margin-tb-bj wanl-gray-dark text-cut-2" @tap="onFind(find)">
                        <view class="cu-tag sm radius margin-right-xs" :class="[typeList[find.type]]">
                            {{ find.type_text }}
                        </view>
                        {{ formatHtml(find.content) }}
                    </view> -->
                    <!-- 图片 -->
                    <view class="container radius-bock">
                        <block v-for="(img, kes) in find.images" :key="kes">
                            <block v-if="find.type === 'live'">
                                <view
                                    class="item"
                                    @tap="onFind(find)"
                                    :class="[kes == 0 ? 'item-live' : '']"
                                    :style="{
                                        backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')',
                                    }"
                                >
                                    <block v-if="kes == 0">
                                        <view class="play">
                                            <text
                                                :class="[
                                                    find.live.state == 1
                                                        ? 'wlIcon-icon_zhibo-mian'
                                                        : 'wlIcon-guijihuifang',
                                                ]"
                                            ></text>
                                        </view>
                                        <view class="state text-white" v-if="find.live.state == 1">
                                            <view class="tags wanl-bg-orange">
                                                <text class="wlIcon-zhibo"></text>
                                                <text class="text-min">直播</text>
                                            </view>
                                            <view class="text-sm">{{ find.live.views }} 在看</view>
                                        </view>
                                        <view class="state text-white" v-else>
                                            <view class="tags bg-grey">
                                                <text class="text-min">回放</text>
                                            </view>
                                            <view class="text-sm">{{ find.live.views }} 看过</view>
                                        </view>
                                        <view class="number text-white">
                                            <view>{{
                                                $wanlshop.toFormat(find.live.goods_ids.split(",").length, "hundred")
                                            }}</view>
                                            <text>宝贝</text>
                                        </view>
                                        <view class="like text-center text-white" v-if="find.live.state == 1">
                                            <view class="likebut">
                                                <text class="wlIcon-yiguanzhu1"></text>
                                            </view>
                                            <text class="text-min">{{ find.live.like }}</text>
                                        </view>
                                    </block>
                                </view>
                            </block>
                            <block v-else-if="find.type === 'video'">
                                <view
                                    class="item item-1 text-sl radius-bock"
                                    :style="{ backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')' }"
                                    @tap="onFind(find)"
                                >
                                    <text class="wlIcon-video text-white"></text>
                                </view>
                            </block>
                            <block v-else>
                                <block v-if="find.images.length == 1">
                                    <view
                                        class="item item-1 radius-bock"
                                        @tap="previewImage(find.images, kes)"
                                        :style="{
                                            backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')',
                                        }"
                                    ></view>
                                </block>
                                <block v-else-if="find.images.length == 3">
                                    <view
                                        class="item"
                                        @tap="previewImage(find.images, kes)"
                                        :class="[kes == 0 ? 'item-3' : '']"
                                        :style="{
                                            backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')',
                                        }"
                                    ></view>
                                </block>
                                <block v-else>
                                    <view
                                        class="item"
                                        @tap="previewImage(find.images, kes)"
                                        :style="{
                                            backgroundImage: 'url(' + $wanlshop.oss(img, 200, 200) + ')',
                                        }"
                                    ></view>
                                </block>
                            </block>
                        </block>
                    </view>
                    <!-- 商品 -->
                    <scroll-view class="scroll-view" scroll-x="true">
                        <view
                            class="scroll-view-item radius-bock"
                            :class="[find.goods.length == 1 ? 'col-1' : '']"
                            v-for="(goods, sub) in find.goods"
                            :key="goods.id"
                            @tap="onGoods(goods.id)"
                        >
                            <view class="img">
                                <image lazy-load :src="$wanlshop.oss(goods.image, 50, 50)"></image>
                            </view>
                            <view class="content padding-left-bj text-cut text-df">
                                {{ goods.title }}
                                <view class="flex align-center">
                                    <text class="text-price text-orange">{{ goods.price }}</text>
                                </view>
                            </view>
                            <view class="icon text-lg wanl-gray-light">
                                <text class="wlIcon-fanhui6"></text>
                            </view>
                        </view>
                    </scroll-view>
                    <!-- <view class="flex justify-between padding-tb-bj align-center">
                        <view v-if="find.type == 'live'" class="wanl-gray-light text-sm" @tap="onFind(find)">
                            {{ find.live.views }} 阅读
                        </view>
                        <view v-else class="wanl-gray-light text-sm" @tap="onFind(find)"> {{ find.views }} 阅读 </view>
                        <view class="flex">
                            <view :class="[find.isLike === 1 ? 'wanl-orange' : '']" @tap="handleLike(index)">
                                <text :class="[find.isLike === 1 ? 'wlIcon-dianzan1' : 'wlIcon-dianzan11']"></text>
                                <text class="margin-left-xs">{{ find.likes }}</text>
                            </view>
                            <view
                                class="margin-left"
                                @tap="onFind(find, 'comments')"
                                v-if="appConfig.comment_switch == 'Y'"
                            >
                                <text class="wlIcon-pinglun"></text>
                                <text class="margin-left-xs">{{ find.comments }}</text>
                            </view>
                        </view>
                    </view> -->
                    <!-- 1.1.6升级 -->
                    <view
                        class="padding-tb-bj solid-top text-center text-orange"
                        v-if="find.newGoods > 0"
                        @tap="onShop(find.shop.id)"
                    >
                        进店查看 {{ find.newGoods }} 件新品
                        <text class="wlIcon-fanhui6 margin-left-xs"></text>
                    </view>
                </view>
            </view>
            <wanl-empty
                v-if="status !== 'loading' && dataList.length === 0"
                src="collect_default3x"
                text="没有找到任何发现动态"
            />
            <uni-load-more :status="status" :content-text="contentText" v-if="dataList.length > 0" />
        </block>
    </scroll-view>
</template>

<script>
export default {
    name: "wanlShopFind",
    props: {
        // 页面配置
        windowHeight: {
            type: Number,
            default: 0,
        },
        headHeight: {
            type: Number,
            default: 0,
        },
        currentItemId: {
            type: String,
            default: "",
        },
        userNo: {
            type: String,
            default: "",
        },
        appConfig: {
            type: Object,
            default() {
                return {};
            },
        },
        user: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    watch: {
        currentItemId(newVal, oldVal) {
            if (newVal === "follow") {
                this.loadData();
            }
        },
    },
    data() {
        return {
            typeList: {
                new: "bg-gradual-yellow",
                live: "wanl-bg-orange",
                want: "bg-gradual-green",
                activity: "bg-gradual-orange",
                show: "wanl-bg-pink",
                video: "wanl-bg-orange",
            },
            dataList: [], //数据
            current_page: 1, //当前页码
            last_page: 1, //总页码
            status: "loading",
            contentText: {
                contentdown: "下拉加载更多",
                contentrefresh: "疯狂加载中...",
                contentnomore: "我是有底线的",
            },
        };
    },
    methods: {
        async loadData(type) {
            this.status = "loading";
            let data = {
                page: this.current_page,
            };
            // 判断上拉还是下拉
            if (type === "upper") {
                this.current_page = 1;
            } else if (type === "lower") {
                if (this.current_page >= this.last_page) {
                    this.status = "noMore";
                    return false;
                } else {
                    this.current_page += 1;
                }
            }
            if (this.currentItemId === "follow") {
                data.type = this.currentItemId;
            }
            // 请求数据
            await uni.request({
                url: "/wanlshop/find/user/getShopList",
                method: "POST",
                data: {},
                success: (res) => {
                    if (type === "lower") {
                        this.dataList = this.dataList.concat(res.data.data);
                    } else {
                        this.dataList = res.data.data;
                    }
                    this.current_page = res.data.current_page; //当前页码
                    this.last_page = res.data.last_page; //总页码
                    // 判断是否还有数据
                    if (res.data.current_page === res.data.last_page || res.data.total === 0) {
                        this.status = "noMore";
                    } else {
                        this.status = "more";
                    }
                },
            });
        },
        async handleLike(index) {
            if (this.$store.state.user.isLogin) {
                let data = this.dataList[index];
                await uni.request({
                    url: "/wanlshop/find/user/setFindUser",
                    method: "POST",
                    data: {
                        id: data.id,
                        type: "likes",
                    },
                    success: (res) => {
                        if (res.data.data === 0) {
                            data.likes -= 1;
                        } else {
                            data.likes += 1;
                        }
                        data.isLike = res.data.data;
                    },
                });
            } else {
                this.$wanlshop.to("/pages/login/login");
            }
        },
        async handleFollow(index, shop) {
            if (this.$store.state.user.isLogin) {
                let data = this.dataList[index];
                await uni.request({
                    url: "/wanlshop/find/user/setFindUser",
                    method: "POST",
                    data: {
                        id: data.user_no,
                        type: "follow",
                    },
                    success: (res) => {
                        if (shop) {
                            let concern = this.$store.state.statistics.dynamic.concern;
                            if (res.data.data === 0) {
                                concern -= 1;
                            } else {
                                concern += 1;
                            }
                            this.$store.commit("statistics/dynamic", {
                                concern: concern,
                            });
                        }
                        data.isFollow = res.data.data;
                    },
                });
            } else {
                this.$wanlshop.to("/pages/login/login");
            }
        },
        handleUpper() {
            // this.loadData('upper');
        },
        handleLower() {
            this.loadData("lower");
        },
        handleUser(user_no) {
            // this.$wanlshop.to(`/pages/apps/find/user?id=${user_no}`);
        },
        //预览图片
        previewImage(image, index) {
            var imgArr = [];
            for (var item of image) {
                imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
            }
            uni.previewImage({
                urls: imgArr,
                current: imgArr[index],
                indicator: "number",
            });
        },
        // 格式化html
        formatHtml(content) {
            // return content.replace(/<\/?.+?>/g, "").replace(/ /g, "");
        },
    },
};
</script>

<style lang="scss">
.wanlshop-find-container {
    &__list {
        .userinfo {
            display: flex;
            justify-content: space-between;
            align-items: center;

            text {
                &[class*="wlIcon-"] {
                    font-size: 28rpx;
                }
            }

            .avatar {
                width: calc(100% - 245rpx);
                display: flex;
                align-items: center;
                .cu-avatar {
                    background-color: #f5f5f5;
                    flex-shrink: 1;
                }
                .content {
                    width: calc(100% - 90rpx);
                }
                .cu-tag {
                    font-size: 20rpx;
                    padding: 0px 10rpx !important;
                }
            }
            // 待优化溢出,临时解决方案
            .menu {
                text-align: right;
                width: 245rpx;
            }

            .cu-btn {
                &.sm {
                    padding: 0 20rpx;
                    font-size: 26rpx;
                    height: 50rpx;
                }
            }
        }

        .content {
            .cu-tag {
                &.sm {
                    padding: 6rpx;
                }
            }
        }

        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;

            &.col-2 {
                grid-template-columns: 1fr 1fr;
            }

            .item {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #fff;
                min-height: 6rem;
                width: 100%;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;

                &.item-1 {
                    grid-column: 1 / 3;
                    grid-row: 1 / 3;
                    height: 600rpx;
                }

                &.item-3 {
                    grid-column: 1 / 3;
                    grid-row: 1 / 3;
                }

                &.item-live {
                    position: relative;
                    grid-column: 1 / 3;
                    grid-row: 1 / 3;

                    .play {
                        width: 120rpx;
                        height: 120rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                        background-color: rgba(0, 0, 0, 0.2);
                        border: 1px solid rgba(255, 255, 255, 0.5);
                        font-size: 56rpx;
                        color: #fff;
                    }

                    .state {
                        display: flex;
                        position: absolute;
                        left: 20rpx;
                        bottom: 20rpx;
                        background-color: rgba(0, 0, 0, 0.1);
                        height: 36rpx;
                        line-height: 36rpx;
                        border-radius: 8rpx;
                        overflow: hidden;

                        & > view {
                            padding: 0 12rpx;
                        }

                        .tags {
                            height: 100%;
                            border-radius: 8rpx;
                            font-size: 28rpx;

                            & > text {
                                margin-right: 4rpx;
                            }
                        }
                    }

                    .number {
                        position: absolute;
                        background-color: rgba(0, 0, 0, 0.2);
                        border: 1px solid rgba(255, 255, 255, 0.5);
                        border-radius: 8rpx 8rpx 0 20rpx;
                        overflow: hidden;
                        padding: 8rpx 6rpx;
                        top: 10rpx;
                        right: 10rpx;
                        line-height: 1;
                        text-align: center;

                        & > view {
                            font-size: 30rpx;
                        }

                        & > text {
                            font-size: 11px;
                        }
                    }

                    .like {
                        position: absolute;
                        bottom: 15rpx;
                        right: 30rpx;
                        line-height: 1.2;

                        .likebut {
                            background-color: #f40;
                            border-radius: 50%;
                            width: 45rpx;
                            line-height: 46rpx;
                            height: 45rpx;
                            font-size: 26rpx;
                        }
                    }
                }
            }
        }

        .scroll-view {
            white-space: nowrap;
            width: 100%;

            .scroll-view-item {
                display: inline-flex;
                width: 60%;
                height: 100rpx;
                overflow: hidden;
                margin-right: 10rpx;
                background-color: #f9f9f9;
                align-items: center;

                &.col-1 {
                    width: 100%;
                    margin-right: 0;
                }

                .img {
                    height: 100rpx;
                    width: 100rpx;
                    border-radius: 18rpx 0 0 18rpx;
                    background-color: #efefef;

                    image {
                        height: 100rpx;
                        width: 100rpx;
                        border-radius: 18rpx 0 0 18rpx;
                        background-color: #efefef;
                    }
                }

                .content {
                    flex: 1;
                    line-height: 1.3;
                }

                .icon {
                    width: 60rpx;
                    text-align: center;
                }
            }
        }
    }
}
</style>
